<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于bootstrap3模态框的插件-czf_modal.js by 草上飞</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="czf.modal.js"></script>
</head>
<body>
<div class="well">
使用方法1：<a href="#" role="button" class="btn" data-trigger="modal" data-footbar="true" data-content="您的操作是非法的，我们已经记录下您的IP" data-title="信息提示1">使用方法1 - 非ajax访问。</a><br /><br />	
使用方法2：<a href="ajax.php" role="button" class="btn" data-trigger="modal" data-footbar="file" data-title="信息提示2">使用方法2 - 全HTML触发Ajax访问服务端</a><br /><br />
使用方法3：<a href="#" role="button" class="btn" id="btnid">使用方法3 - 全JS触发访问服务端</a><!--href必须加#--> <br /><br /> 
使用方法4：<a href="ajax2.php" role="button" class="btn" data-trigger="modal" data-footbar="file" data-title="信息提示4">使用方法4 - 全HTML触发Ajax访问服务端，服务端返回JSON格式数据</a>
</div>
<script>
    $(function () {
		$('#btnid').on('click', function() {	
			$(this).czf_modal({
			  title: '信息提示3',
			  content: "数据加载中....",
			  footbar:true,
			  loadimg:'ajax-loader.gif',
			  remote:"ajax.php"
			});
			//remote();或者在这里加ajax函数，将内容加载到.modal-body中
		})
    })
</script>
</body>
</html>